<?php
require_once("header.php");
require_once("model/DB.php");
require_once("model/Archive.php");
require_once("function/teacher.login.php");


$courses = Archive::getArchive();

?>
<script>
function edit(id){
	var check_id = 0;
	$("#add_form").children().each(function(i){
		if($(this).children().find('.id').val()==id)
		{	
			
			check_id++;
			
		}
	});
	if(check_id>0){
		return false;
	}
	$.post
	(
		"function/getArchive.php",
		{id:id},
		function(data){
			
			var div = $("#kid_form").clone(true);
			
			div.css("display","block");
			
			div.find(".title").val(data.title);
			div.find(".id").val(id);	
			div.appendTo($("#add_form"));
		},
		"json"
	);


}

function del(id){
	$.post
	(
		"function/delArchive.php",
		{id:id},
		function(data){
			if(data=="del"){
				$("#kid_list").load("pieces/archivelist.php");
				alert("Course is deleted!");
				$("#add_form").children().each(function(i){
					if($(this).children().find('.id').val()==id)
					{	
						$(this).children().remove();						
					}
				});				
			}
		}
	)
}
$(document).ready(function(){
	$("#kid_table").tablesorter( 
		{widthFixed: true, widgets: ['zebra']} 
	).tablesorterPager({container: $("#pager")});
	
	$("#add").click(function(){
		
		var div = $("#kid_form").clone(true);
		div.css("display","block");
		div.appendTo($("#add_form"));
	});
	
	$(".cancel").click(function(){
		
		$(this).parents().each(function(i){
			if(i==4){
				$(this).remove();
			}
		});
	});	
	
	$(".add_kid").submit(function(){
		form = $(this);
		var title = $(this).find(".title").val();
		var id = $(this).find(".id").val();
		

		if(!title){
			alert("Please complete the forms");
			return false;
		}
		
		$.post(
		 "function/addArchive.php",
		 {title:title,id:id},
		 function(data){
			if(data){
				if(data=="added"){
					alert(title+" was added into database!");
					$("#kid_list").load("pieces/courselist.php");
					form.remove();
				}
				else if(data=="saved"){
					alert(title+" was edited and saved into database!");
					$("#kid_list").load("pieces/courselist.php");
					form.remove();
				}				
				else{
					alert(data);
				}
			}
			else{
				alert("Connection Error!");
			}
		 }
		);
		return false;
		
	});
});

</script>
<center>
<table id="admin_detail" cellspacing="0" cellpadding="0" >
<tr>
<td id="left_bar" style="border-right:1px solid black;text-align:center; width:100px;">

<br>
<a class="admin_left" href="admin.php">Home</a>
<br>
<br>
<a class="admin_left" href="javascript:void(0)" id="add">Add Archivement</a>
</td>
<td>
<div id="kid_list">
<table id="kid_table" class="tablesorter">
	<thead>
		<tr><td>Image</td><td>Description</td><td>Kid's Name</td><td>Action</td></tr>
	</thead>
	<tbody>
	<tr></tr>
		<?php
		if($courses){
			
			foreach($courses as $course){
				?>
				<tr><td><?php echo $course['title']; ?></td><td><a href="javascript:void(0)" class="edit" alt="edit" value="" onclick="edit(<?php echo $course['id'] ?>)">edit</a> <a href="javascript:void(0)" alt="delete" onclick="del(<?php echo $course['id'] ?>)">delete</a></td></tr>
				<?php 
			}
		}
		?>
	</tbody>
</table>


<div id="pager" class="pager" style="width:800px;margin-left:5px;margin-top:15px">
					<form>
						<img class="first" src="images/first.png"/>
						<img class="prev" src="images/prev.png"/>
						<input class="pagedisplay" type="text"/>
						<img class="next" src="images/next.png"/>
						<img class="last" src="images/last.png"/>
						<select id="pagesize" class="pagesize">
							 <option value="10" >10</option>
							 <option value="15" >15</option>
							 
						</select>
					</form>
</div>
</div>
<div id="kid_form" style="display:none">
<form class="add_kid">
<table>
	<tr>
		<td>*Title</td><td><input type="text" class="title"></td>
	</tr>	

	<tr>
		<td><input type="submit" value="Save"></td><td><input type="button" class="cancel" value="Cancel"></td>
		<input type="hidden" class="id" value="">
	</tr>
</table>
</form>
</div>
<div id="add_form">
</div>
</td>
</tr>
</table>
</center>